<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>File System</title>
  </head>
  
  <body>
    <div id="mountNode"></div>
    <script src="assets/hierarchy.js"></script>
    <script src="../build/g6.js"></script>
    <script>
      G6.registerNode('file-node', {
        draw(cfg, group) {
          const keyShape = group.addShape('rect', {
            attrs: {
              x: cfg.x - 4,
              y: cfg.y - 12,
              fill: '#fff',
              stroke: null
            }
          });
          let marker;
          if (cfg.data.collapsed) {
            marker = group.addShape('marker', {
              attrs: {
                symbol: 'triangle',
                x: cfg.x + 4,
                y: cfg.y - 2,
                r: 4,
                fill: '#666'
              },
            });
          } else if (cfg.data.children && cfg.data.children.length > 0) {
            marker = group.addShape('marker', {
              attrs: {
                symbol: 'triangle-down',
                x: cfg.x + 4,
                y: cfg.y - 2,
                r: 4,
                fill: '#666'
              }
            });
          }
          const shape = group.addShape('text', {
            attrs: {
              x: cfg.x + 15,
              y: cfg.y + 4,
              text: cfg.data.name,
              fill: '#666',
              fontSize: 16,
              textAlign: 'left'
            }
          });
          const bbox = shape.getBBox();
          keyShape.attr({
            width: bbox.width + 20,
            height: bbox.height + 4
          });
          return keyShape;
        }
      });
      G6.registerEdge('step-line', {
        getControlPoints(cfg) {
          const startPoint = cfg.startPoint;
          const endPoint = cfg.endPoint;
          return [{
            x: startPoint.x,
            y: endPoint.y
          }]
        }
      },
      'polyline');
      const graph = new G6.TreeGraph({
        container: 'mountNode',
        width: 500,
        height: 500,
        pixelRatio: 2,
        linkCenter: true,
        modes: {
          default: [{
            type:
            'collapse-expand',
            animate: false,
            onChange(item, collapsed) {
              const data = item.get('model').data;
              data.collapsed = collapsed;
              return true;
            }
          }]
        },
        defaultEdge: {
          style: {
            stroke: '#A3B1BF'
          }
        },
        layout: data => {
          return Hierarchy.indented(data, {
            isHorizontal: true,
            direction: 'LR',
            indent: 80,
            getHeight() {
              return 16
            },
            getWidth() {
              return 16
            },
          });
        }
      });
      const data = {
        "id": "1",
        "name": "src",
        "children": [{
          "id": "1-1",
          "name": "behavior",
          "children": []
        },
        {
          "id": "1-3",
          "name": "graph",
          "children": [{
            "id": "1-3-1",
            "name": "controller",
            "children": []
          }]
        },
        {
          "id": "1-5",
          "name": "item",
          "children": []
        },
        {
          "id": "1-6",
          "name": "shape",
          "children": [{
            "id": "1-6-2",
            "name": "extend",
            "children": []
          }]
        },
        {
          "id": "1-7",
          "name": "util",
          "children": []
        }]
      };
      graph.data(data);
      graph.render();
      graph.getNodes().forEach(node => {
        const model = node.get('model');
        model.shape = 'file-node';
        model.label = model.data.name;
      });
      graph.getEdges().forEach(edge => {
        edge.get('model').shape = 'step-line';
      });
      graph.refresh();
      graph.fitView();
    </script>
  </body>

</html>
